<template>
	<view class="c-container" v-if="data.type == 1">
		<y-home-comp-title :exist='data.title.exist' :main='data.title.main' :sub='data.title.sub'></y-home-comp-title>
		<view class="c-card">
			<view class="c-body">
				<image :src="data.body.banner" class="bn"></image>
				<view class="cb-title">
					<view class="cbt-l">
						<view class="cbt-main">{{data.body.title.left.main}}</view>
						<view class="cbt-sub">{{data.body.title.left.sub}}</view>
					</view>
					<view class="cbt-r">
						<view class="cbt-container">
							<text class="cbt-tag" :style="{'color': data.body.title.right.main.tag.color, 'background-color': data.body.title.right.main.tag.backgroundColor}">
								{{data.body.title.right.main.tag.text}}
							</text>
							<text class="cbt-price cbt-text" :style="{'color': data.body.title.right.main.price.color}">
								{{data.body.title.right.main.price.text}}
							</text>
							<text class="cbt-text" :style="{'color': data.body.title.right.main.text.color}">
								{{data.body.title.right.main.text.text}}
							</text>
						</view>

						<view class="cbt-sub" :class="{'deprecated': data.body.title.right.sub.deprecated}">
							{{data.body.title.right.sub.text}}
						</view>
					</view>
				</view>
				<view class="cb-footer">
					<view class="cbf-container" v-for="(i, index) in data.body.footer" v-bind:key="index">
						<view class="cbf-main" :style="{'color': i.main.color}">{{i.main.text}}</view>
						<view class="cbf-sub" :style="{'color': i.sub.color}">{{i.sub.text}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import yHomeCompTitle from './yHomeCompTitle.vue'
	let struct = {
		type: 1,
		title: {
			exist: true,
			main: '悦管家Life',
			sub: '悦享生活新方式'
		},
		body: {
			banner: '../../static/home/t1.png',
			title: {
				left: {
					main: '食堂(为厨房/美食广场)',
					sub: '每日回味无穷，小企业的福音'
				},
				right: {
					main: {
						tag: {
							backgroundColor: '#DC4699',
							color: 'white',
							text: '面单季'
						},
						price: {
							color: '#DC4645',
							text: '0元'
						},
						text: {
							color: '#DC4645',
							text: '起'
						}
					},
					sub: {
						text: '原价600元起',
						deprecated: true
					}
				}
			},
			footer: [{
					main: {
						color: '',
						text: '+健康'
					},
					sub: {
						color: '',
						text: '孕产新食尚'
					}
				},
				{
					main: {
						color: '',
						text: '+品质'
					},
					sub: {
						color: '',
						text: '孕产新食尚'
					}
				}, {
					main: {
						color: '',
						text: '+成长'
					},
					sub: {
						color: '',
						text: '孕产新食尚'
					}
				}, {
					main: {
						color: '',
						text: '+智能'
					},
					sub: {
						color: '',
						text: '坚守好口碑'
					}
				}
			]
		}
	}
	export default {
		data() {
			return {
				data: struct
			};
		},
		components: {
			yHomeCompTitle
		}
	}
</script>

<style lang="scss" scoped>
	.c-container {
		.c-card {
			clear: both;
			padding: 0 20upx;

			&:only-child {
				margin-top: 30upx;
			}

			.c-body {
				background-color: white;
				padding: 30upx;
				border-radius: 20upx;
				position: relative;

				.bn {
					width: 650upx;
					height: 200upx;
					display: block;

					&:only-child {
						border-radius: 20upx;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 230upx;
					}
				}

				.cb-title {
					margin-top: 20upx;
					overflow: hidden;

					.cbt-l {
						float: left;

						.cbt-main {
							font-size: 32upx;
							font-weight: 400;
							color: rgba(3, 3, 3, 1);
							line-height: 44upx;
						}
					}

					.cbt-r {
						float: right;

						.cbt-container {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;

							.cbt-tag {
								font-size: 20upx;
								font-weight: 500;
								color: white;
								border-radius: 17upx;
								background-color: #DC4645;
								padding: 0 14upx;
								margin-right: 20upx;
								line-height: 34upx;
							}

							.cbt-text {
								color: rgba(220, 70, 69, 1);
								font-size: 32upx;
								font-weight: bold;
								line-height: 44upx;
							}

							.cbt-price {
								margin-right: 10upx;
							}
						}

						.cbt-sub {
							text-align: right;
							color: #cccccc;
						}
					}

					.cbt-sub {
						font-size: 20upx;
						font-weight: 400;
						color: rgba(162, 162, 162, 1);
						line-height: 28upx;
						margin-top: 12upx;
					}

					.deprecated {
						text-decoration: line-through;
					}
				}

				.cb-footer {
					border-top: 2upx solid #E8E8E8;
					margin: 20upx 4upx 0;
					width: 642upx;
					padding: 24upx 8upx 10upx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: row;

					.cbf-container {
						text-align: center;
						flex: 1;

						.cbf-main {
							color: #3CC3B2;
							line-height: 34upx;
							font-size: 24upx;
						}

						.cbf-sub {
							color: #A2A2A2;
							font-size: 20upx;
							line-height: 28upx;
							font-weight: 400;
							margin-top: 6upx;
						}
					}

				}
			}
		}
	}
</style>
